<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 搜索 -->
        <el-form
          :inline="true"
          :model="reqParams"
          class="demo-form-inline"
          label-width="80px"
          size="small"
          ref="BiaoDan"
        >
          <el-form-item label="学科名称">
            <el-input
              v-model="reqParams.subjectName"
              placeholder="搜索关键字"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <!-- 按钮 -->
            <el-button @click="resetFields">清除</el-button>
            <el-button type="primary" @click="SearchKeyword">搜索</el-button>
          </el-form-item>
          <!-- 按钮 -->
          <el-button
            type="success"
            style="float: right;;"
            @click="showDialog = true"
            size="small"
            icon="el-icon-edit"
            >新增学科</el-button
          >
        </el-form>
        <!-- 提示条 -->
        <el-alert
          :title="` 数据一共 ${total} 条`"
          type="info"
          :closable="false"
          show-icon
          style="margin-bottom: 15px;"
        >
        </el-alert>
        <!-- 表单 -->
        <el-table :data="Subjects" style="margin-bottom: 15px;">
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column label="学科名称" prop="subjectName">
          </el-table-column>
          <el-table-column label="创建者" prop="username"> </el-table-column>
          <el-table-column label="创建日期" width="160px">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示">
            <template slot-scope="scope">
              {{ scope.row.isFrontDisplay === 1 ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column label="二级目录" prop="twoLevelDirectory">
          </el-table-column>
          <el-table-column label="标签" prop="tags"> </el-table-column>
          <el-table-column label="题目数量" prop="totals"> </el-table-column>
          <el-table-column label="操作" width="240px">
            <template slot-scope="{ row }">
              <el-link
                :underline="false"
                type="primary"
                @click="Toclassify(row)"
                >学科分类</el-link
              >
              <el-link :underline="false" type="primary" @click="Totags(row)"
                >学科标签</el-link
              >
              <el-link
                :underline="false"
                type="primary"
                @click="updateData(row)"
                >修改</el-link
              >
              <el-link
                :underline="false"
                type="primary"
                style="margin-right: 0;"
                @click="Delete(row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-sizes="[5, 10, 20, 40]"
          :current-page="reqParams.page"
          :page-size="reqParams.pagesize"
          @size-change="sizechange"
          layout="prev, pager, next,sizes, jumper"
          style="float: right;"
          :total="total"
          @current-change="ChangePager"
        >
        </el-pagination>
      </el-card>
    </div>
    <!-- 弹窗 -->
    <el-dialog :visible="showDialog" :title="showTitle" width="400px">
      <el-form
        ref="SubjectAdd"
        :model="SubjectAdd"
        size="small"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="SubjectAdd.subjectName" style="width: 100%">
          </el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="SubjectAdd.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-row type="flex" justify="end">
          <el-col :span="12">
            <el-button @click="btnCancel">取消</el-button>
            <el-button type="primary" @click="btnOK">确认</el-button>
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  remove as Delete,
  add,
  update,
  detail,
} from "@/api/hmmm/subjects.js";
export default {
  name: "subjects-page",
  data() {
    return {
      SubSwitchValue: true,
      reqParams: {
        subjectName: null,
        page: 1,
        pagesize: 10,
      },
      Subjects: [],
      total: 0,
      // 弹层显示
      showDialog: false,
      selectList: [],
      SubjectAdd: {
        isFrontDisplay: true,
        subjectName: "",
      },
      rules: {
        subjectName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getSubjects();
  },
  computed: {
    showTitle() {
      return this.SubjectAdd.id ? "修改学科" : "新增学科";
    },
  },
  methods: {
    async getSubjects() {
      const { data } = await list(this.reqParams);
      this.Subjects = data.items;
      this.total = data.counts;
    },
    // 分页方法
    ChangePager(newPage) {
      this.reqParams.page = newPage;
      this.getSubjects();
    },
    sizechange(NewSize) {
      this.reqParams.page = 1;
      this.reqParams.pagesize = NewSize;
      this.getSubjects();
    },
    // 搜索关键字
    SearchKeyword() {
      this.reqParams.page = 1;
      this.getSubjects();
    },
    // 清空
    resetFields() {
      this.reqParams.subjectName = "";
      this.getSubjects();
    },
    // 去学科目录
    Toclassify(row) {
      const { id, subjectName: name } = row;
      this.$router.push({ path: "directorys", query: { id, name } });
    },
    // 去标签目录
    Totags(row) {
      const { id, subjectName: name } = row;
      this.$router.push({ path: "tags", query: { id, name } });
    },
    // 目录修改
    async updateData(id) {
      const { data } = await detail(id);
      this.SubjectAdd = data;
      this.showDialog = true;
    },
    // 新增学科
    async btnOK() {
      try {
        // 校验表单
        await this.$refs.SubjectAdd.validate();
        if (this.SubjectAdd.id) {
          // 修改   调用接口
          await update(this.SubjectAdd);
        } else {
          // 新增   调用接口
          await add(this.SubjectAdd);
        }
        // 更新数据
        this.getSubjects();
        this.SubjectAdd = {
          subjectName: "",
        };
        // 关闭弹层
        this.showDialog = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 弹层取消
    btnCancel() {
      this.SubjectAdd = {
        subjectName: "",
      };
      this.getSubjects();
      this.showDialog = false;
    },
    // 删除
    Delete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await Delete(id);
          this.$message.success("删除成功");
          this.getSubjects();
        })
        .catch((e) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 10px;
}
.el-link {
  margin-left: 10px;
}
</style>
